<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户端验证</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
        crossorigin="anonymous"></script>
    <style></style>
</head>

<body>
    
    <div class="container">
        
        <h1>客户端验证</h1>
        <hr>
        <form class="row g-3 needs-validation" novalidate>
            <div class="col-md-4">
                <label for="validationCustom01" class="form-label">名</label>
                <input type="text" class="form-control" id="validationCustom01" required>
                <div class="valid-feedback">
                    正常
                </div>
                <div class="invalid-feedback">
                    请输入一个正确的名字
                </div>
            </div>
            <div class="col-md-4">
                <label for="validationCustom02" class="form-label">姓</label>
                <input type="text" class="form-control" id="validationCustom02" required>
                <div class="valid-feedback">
                    正常
                </div>
                <div class="invalid-feedback">
                    请输入一个正确的姓氏
                </div>
            </div>
            <div class="col-md-4">
                <label for="validationCustomUsername" class="form-label">用户名</label>
                <div class="input-group has-validation">
                    <span class="input-group-text" id="inputGroupPrepend">@</span>
                    <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
                    <div class="invalid-feedback">
                        请输入一个正确的用户名
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <label for="validationCustom03" class="form-label">市</label>
                <input type="text" class="form-control" id="validationCustom03" required>
                <div class="invalid-feedback">
                   请输入一个正确的城市名称
                </div>
            </div>
            <div class="col-md-3">
                <label for="validationCustom04" class="form-label">省</label>
                <select class="form-select" id="validationCustom04" required>
                    <option selected disabled value="">Choose...</option>
                    <option>河南</option></option>
                </select>
                <div class="invalid-feedback">
                    请输入一个正确的省份名称
                </div>
            </div>
            <div class="col-md-3">
                <label for="validationCustom05" class="form-label">Zip</label>
                <input type="text" class="form-control" id="valZip" required>
                <div class="invalid-feedback">
                请输入正确的邮编
                </div>
            </div>
            <div class="col-12">
                <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
                <label class="form-check-label" for="invalidCheck">
                    Agree to terms and conditions
                </label>
                <div class="invalid-feedback">
                    You must agree before submitting.
                </div>
                </div>
            </div>
            <div class="col-12">
                <button class="btn btn-primary" type="submit">确定</button>
            </div>
        </form>

    </div>
    <script>
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (function () {
    //use ‘strict’： "严格模式"是一种在JavaScript代码运行时自动实行更严格解析和错误处理的方法。这种模式使得Javascript在更严格的条件下运行。
    //最好只在函数内使用严格模式
    'use strict'

    // 获取需要验证的所有  form 控件对象，存入 forms中
    var forms = document.querySelectorAll('.needs-validation')
    /*
    var zip = document.querySelector('#valZip');
    if(zip){
        console.log(zip.validity);
        if(zip.value.length==6)
        {
            zip.validity=valid;
        }
        else{
            zip.validity=invalid;
        }
    }*/
    //对数组进行遍历，并添加对 submit (提交事件) 的监听，挂接事件函数（回调函数）
    //如果没有通过验证，则阻止提交
    Array.prototype.slice.call(forms)
        .forEach(function (form) {
        form.addEventListener('submit', function (event) {
            if (!form.checkValidity()) {
            event.preventDefault()//防止事件（event）冒泡
            event.stopPropagation()//阻止事件执行（在这里对应的就是提交 submit 事件）
            }

            form.classList.add('was-validated')
        }, false)
        })
    })()
    </script>
</body>

</html>